<script setup lang="ts">
import { RouterView } from 'vue-router'
import {ref,onMounted} from 'vue'
import dayjs from "dayjs";
import LogOut from "@/components/LogOut.vue";
const timeStr = ref<string>('')
const weekDay = ref<string>('')
const getWeek=()=> {
  let day = dayjs().day();
  let week = ['日', '一', '二', '三', '四', '五', '六'];
  return '星期' + week[day];
}
onMounted(()=>{
  timeStr.value=dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
  setInterval(() => {
    timeStr.value=dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
    weekDay.value=getWeek()
  },1000)
})
</script>

<template>
  <!-- 公共头部 start -->
  <div class="public-top">
    <div class="public-top_left">
<!--      <img class="public-weater" src="@/assets/public-weather.png" alt="">-->
<!--      <span class="public-weater_tit">多云 16°~24°</span>-->
    </div>
    <div class="public-top_tit">智慧实验室管控一体化平台</div>
    <div class="public-top_right"><span class="public-right_tit">{{weekDay}}</span><span>{{timeStr}}</span></div>
    <div class="public-back" id="pageHeaderContainer"></div>
    <LogOut top="10px" right="20px" width="30px" height="30px" />
  </div>
  <!-- 公共头部 end -->
  <RouterView />

</template>
<style>

.public-top{
  width: 100%;
  height: 94px;
  background: url("@/assets/public-top.png") no-repeat;
  position: relative;
}

.public-top_left{
  position: absolute;
  left: 4%;
  top: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
  .public-weater{
    width: 24px;
    height: 24px;
    margin-right: 20px;
  }
  .public-weater_tit{
    font-family: YouSheBiaoTiHei;
    font-size: 18px;
    color: transparent;
    background-image: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 18%, #CAE2FF 77%, #8FACD7 100%);
    -webkit-background-clip: text;
    line-height: 23px;
    text-shadow: 0 2px 6px #011853;
    font-style: normal;
    font-weight: bold;
  }
}

.public-top_tit{
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%,-40%);
  font-family: YouSheBiaoTiHei;
  color: transparent;
  background-image: linear-gradient(90deg, #EEEEEE 0%, #1EA0FF 100%);
  -webkit-background-clip: text;
  font-size: 42px;
  font-style: normal;
  font-weight: bold;
}

.public-top_right{
  position: absolute;
  right: 3%;
  top: 15%;
  color: transparent;
  background-image: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 18%, #CAE2FF 77%, #8FACD7 100%);
  -webkit-background-clip: text;
  font-family: YouSheBiaoTiHei;
  font-size: 18px;
  line-height: 23px;
  text-shadow: 0 2px 6px #011853;
  font-style: normal;
  font-weight: bold;
  .public-right_tit{
    margin-right: 16px;
  }
}

.public-back{
  position: absolute;
  bottom: 0;
  left: 1%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.public-list_tit{
  display: inline-block;
  width: 468px;
  height: 47px;
}
.home-bg{
  height: calc(100%);
  background: linear-gradient(rgba(0,169,255,0.2) 0%, rgba(0,160,245,0.19) 7%, rgba(0,140,220,0.16) 28%, rgba(0,125,202,0.12) 50%, rgba(0,116,191,0.08) 73%, rgba(0,113,188,0.04) 100%);
}


.public-select .el-select__suffix{
  margin-right: 11px;
}

.public-select .el-select__placeholder,.public-select .el-select__placeholder.is-transparent{
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 24px;
  color: #fff;
  line-height: 33px;
  font-style: normal;
}

.public-date{
  background: rgba(5,35,72,0.41);
  border-radius: 5px;
  border: 1px solid #00AAFE;
  height: 37px;
  padding-left: 20px;
}
.public-date .el-range-separator{
  color: #fff;
}
.public-date .el-range-input{
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #fff;
  font-style: normal;
}


.public-date .el-input__inner, .public-date .el-range-input {
  color: #fff;
  &::placeholder {
    color: #fff;
  }

  &::-webkit-input-placeholder {
    /* WebKit browsers 适配谷歌 */
    color: #fff;
  }

  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 适配火狐 */
    color: #fff;
  }

  &::-moz-placeholder {
    /* Mozilla Firefox 19+ 适配火狐 */
    color: #fff;
  }

  &:-ms-input-placeholder {
    /* Internet Explorer 10+  适配ie*/
    color: #fff;
  }
}

</style>
